<template id="temp"> <!-- vue实例外创建 -->
  <div>
    <div class="top">
      <!-- 概况 -->
      <el-card class="box-card" style="width: 50%;">
        <div slot="header" class="clearfix">
          <span>概况</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
              class="el-icon-refresh"></i></el-button>
        </div>
        <div class="top_one">
          <div style="float: left;" v-for="(item, index) in gaikuang" :key="index">
            <span>{{ item.label }}</span>
            <p>{{ item.value }}.00</p>
          </div>
        </div>
      </el-card>
      <!-- 客户 -->
      <el-card class="box-card" style="width: 25%;">
        <div slot="header" class="clearfix">
          <span>客户</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="kehulistl"><i
              class="el-icon-refresh"></i></el-button>
        </div>
        <div class="top_one">
          <div style="float: left;" v-for="(item, index) in kehu" :key="index">
            <span>{{ item.label }}</span>
            <p>{{ item.value }}</p>
          </div>
        </div>
      </el-card>
      <!-- 供应商 -->
      <el-card class="box-card" style="width: 25%;">
        <div slot="header" class="clearfix">
          <span>供应商</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="gongyingshanglistl"><i
              class="el-icon-refresh"></i></el-button>
        </div>
        <div class="top_one">
          <div style="float: left;" v-for="(item, index) in gongyingshang" :key="index">
            <span>{{ item.label }}</span>
            <p>{{ item.value }}</p>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 下半部分 -->
    <div class="bottom">
      <!-- 首个卡片 -->
      <div style="width: 49.9%;">
        <!-- 销售 -->
        <el-card style="width: 100%;" :body-style="{ padding: 0 }">
          <div slot="header" class="clearfix">
            <span>销售</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
          <el-col class="xsaa" :span="8" v-for="(item, index) in xiaoshou" :key="index">
            <el-card shadow="hover" class="xiaoshoudd">
              <p>{{ item.label }}</p>
              <div>
                <div>
                  <span>今日笔数</span>
                  <h3>{{ item.t_count }}</h3>
                  <span>本周：{{ item.w_count }}</span>
                  <span>本月：{{ item.m_count }}</span>
                </div>
                <div>
                  <span>今日金额</span>
                  <h3>{{ item.t_amt }}.00</h3>
                  <span>本周：{{ item.w_amt }}.00</span>
                  <span>本月：{{ item.m_amt }}.00</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-card>
        <!-- 采购 -->
        <el-card style="width: 100%; margin-top: 8px;" :body-style="{ padding: 0 }">
          <div slot="header" class="clearfix">
            <span>采购</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
          <el-col class="xsaa" :span="8" v-for="(item, index) in caigou" :key="index">
            <el-card shadow="hover" class="xiaoshoudd">
              <p>{{ item.label }}</p>
              <div>
                <div>
                  <span>今日笔数</span>
                  <h3>{{ item.t_count }}</h3>
                  <span>本周：{{ item.w_count }}</span>
                  <span>本月：{{ item.m_count }}</span>
                </div>
                <div>
                  <span>今日金额</span>
                  <h3>{{ item.t_amt }}.00</h3>
                  <span>本周：{{ item.w_amt }}.00</span>
                  <span>本月：{{ item.m_amt }}.00</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-card>
      </div>
      <!-- 下半部分中间部分 -->
      <div style="width: 25%;">
        <!-- 销售金额 -->
        <el-card style="width: 100%;">
          <div slot="header" class="clearfix">
            <span>销售金额</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
        </el-card>
        <!-- 毛利润 -->
        <el-card style="width: 100%; margin-top: 8px;">
          <div slot="header" class="clearfix">
            <span>毛利润</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
        </el-card>
        <!-- 采购金额 -->
        <el-card style="width: 100%; margin-top: 8px;">
          <div slot="header" class="clearfix">
            <span>采购金额</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gaikuanglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
        </el-card>
        <!-- 库存结存金额 -->
        <el-card style="width: 100%; margin-top: 8px;">
          <div slot="header" class="clearfix">
            <span>库存结存金额</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="tu"><i
                class="el-icon-refresh"></i></el-button>
          </div>
          <div style="height: 120px;width: 100%;">
            <div id="main" style="width: 100%;height:100%;"></div>
          </div>
        </el-card>
      </div>

      <!-- 下半部分尾部部分 -->
      <div style="width: 25%;">
        <!-- 处理中主要单据 -->
        <el-card style="width: 100%;"  class="romepad">
          <div slot="header" class="clearfix">
            <span>处理中主要单据</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="chulizhonglistl"><i
                class="el-icon-refresh"></i></el-button>
          </div>
          <el-table :data="chulizhong" style="width: 100%">
            <el-table-column prop="name">
            </el-table-column>
            <el-table-column prop="edit" label="编制中">
            </el-table-column>
            <el-table-column prop="appr" label="待核批">
            </el-table-column>
            <el-table-column prop="exec" label="执行中">
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>
<!-- 调用   <mycom></mycom> -->
<script>
import { GaikuangList, KehuList, GongyshangList, XiaoshouList, CaigouList, CaigoujineList, CulizhongList } from '@/api/ytw';
import * as echarts from 'echarts';


export default {
  data() {
    return {
      //概况列表
      gaikuang: null,
      //客户列表
      kehu: null,
      //供应商列表
      gongyingshang: null,
      //销售列表
      xiaoshou: null,
      //采购列表
      caigou: null,
      //采购金额列表
      caigoujine: null,
      // 图标x轴信息
      x: [],
      // 图标y轴信息
      y: [],
      // 处理中主要单据列表
      chulizhong: null
    }
  },
  methods: {
    //获取概况列表
    async gaikuanglistl() {
      let { result } = await GaikuangList()
      this.gaikuang = result.records
      console.log(this.gaikuang)
    },
    //获取客户列表
    async kehulistl() {
      let { result } = await KehuList()
      this.kehu = result.records
      console.log(this.kehu)
    },
    //获取供应商列表
    async gongyingshanglistl() {
      let { result } = await GongyshangList()
      this.gongyingshang = result.records
      console.log(this.gongyingshang)
    },
    //获取销售列表
    async xiaoshoulistl() {
      let { result } = await XiaoshouList()
      this.xiaoshou = result.records
      console.log(this.xiaoshou)
    },
    //获取采购列表
    async caigoulistl() {
      let { result } = await CaigouList()
      this.caigou = result.records
      console.log(this.caigou)
    },
    //图表和库存结存
    async tu() {
      let { result } = await CaigoujineList()
      this.caigoujine = result.records
      console.log(this.caigoujine, '图表')
      this.caigoujine.map((item) => {
        this.x.push(item.x);
        this.y.push(item.y);
        console.log(this.x, this.y);
      })
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: this.x
        },
        yAxis: {},
        grid: {
          top: '5%',
          bottom: '26%',
          left: '15%',
          right: '4%'
        },
        series: [
          {
            name: 'y',
            type: 'bar',
            data: this.y,
            barWidth: 50,
            itemStyle: {
              normal: {
                color: '#3aa0ff'
              }
            }
          }
        ]
      });
      // 渲染后将x,y轴内容清空
      this.x = [],
        this.y = []
    },
    //获取处理中主要单据列表
    async chulizhonglistl() {
      let { result } = await CulizhongList()
      this.chulizhong = result.records
      console.log(this.chulizhong, '处理中主要单据')
    },

  },
  mounted() {
    //调用概况
    this.gaikuanglistl()
    //调用客户方法
    this.kehulistl()
    //调用供应商方法
    this.gongyingshanglistl()
    //调用销售方法
    this.xiaoshoulistl()
    //调用采购方法
    this.caigoulistl()
    //图表和库存结存方法
    this.tu()
    //处理中主要单据方法
    this.chulizhonglistl()
  }
}
</script>
<style scoped>
::v-deep .el-table tr th{
    background-color: #fafafa;
  }
.romepad{
  .el-card__body{
    padding: 0;
  }
  
}
::v-deep .xiaoshoudd {
  font-size: 14px;

  &>div {
    display: flex;
    flex-direction: column;

    &>div {
      /* width: 50%; */
      display: flex;
      justify-content: space-around;

      &>div {
        display: flex;
        flex-direction: column;
        color: rgba(0, 0, 0, .65);
        font-size: 14px;

        &>:nth-child(1) {
          color: rgba(0, 0, 0, .45);
          display: inline-block;
          font-size: 14px;
          line-height: 22px;
          margin-bottom: 4px;
        }

        h3 {
          color: rgba(0, 0, 0, .85);
          font-size: 24px;
          font-weight: 400;
          line-height: 32px;
          margin: 0;
        }

        &>:nth-child(3) {
          margin-top: 16px;
        }
      }
    }
  }
}

.bottom {
  display: flex;
  min-height: 980px;
  background-color: #eff1f4;

  &>div {
    height: 20px;
    padding: 4px;
    box-sizing: border-box;
    /* background-color: aqua; */

    .xsaa {
      width: 50%;
    }


  }
}

.top {
  display: flex;
  justify-content: space-around;
}

.top_one {
  display: flex;
  /* float: left; */
  justify-content: space-around;

  &>div {
    display: flex;
    text-align: center;
    flex-direction: column;

    &>span {
      color: rgba(0, 0, 0, .45);
      font-size: 14px;
    }

    &>p {
      color: rgba(0, 0, 0, .85);
      font-size: 24px;
      margin: 10px;
    }
  }
}

.bo_last {
  display: flex;
  justify-content: flex-end;

  &>span {
    margin-right: 16px;
  }
}

.s {
  display: flex;
  justify-content: space-evenly;

}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
  height: 160px;
  margin: 4px;
}
</style>